<script setup>
import Dialog from "@/components/Dialog.vue";
import { watchEffect, ref } from "vue";
import { useRouter } from "vue-router";
const props = defineProps(["visible", "title", "thead", "data"]);

const emits = defineEmits(["close"]);
const router = useRouter();
const sdxrClick = () => {
  router.push("/employmentServices");
};
</script>

<template>
  <Dialog
    :visible="props.visible"
    :title="props.title"
    size="default"
    @close="
      () => {
        emits('close');
      }
    "
  >
    <div class="table-container">
      <div class="btn">
        <div class="box2_c1_ccc">
          <div class="box2_c1_ccc_c">全部</div>
          <div class="box2_c1_ccc_c">市级</div>
          <div class="box2_c1_ccc_c">区县级</div>
          <div class="box2_c1_ccc_c">高校级</div>
        </div>
      </div>
      <div class="table-container_content">
        <div class="box-c">
          <div class="box-c-c1">
            <img src="@/assets/images/city.png" class="icon1" />
            <span>市级-大学生毕业就业AI服务</span>
            <img src="@/assets/images/aiBtn.png" class="icon2" />
          </div>
          <div class="box-c-c2">
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">高校毕业生人数</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">45512</span>
                <span class="box-c-c2-c-c2-c2">人</span>
              </div>
            </div>
            <img src="@/assets/images/arrow1.png" class="arrow pos1" />
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">高校毕业意向压力指数</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">7.5</span>
                <span class="box-c-c2-c-c2-c2"></span>
              </div>
            </div>
            <img src="@/assets/images/arrow1.png" class="arrow pos2" />
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">毕业生去向落实占比</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">79</span>
                <span class="box-c-c2-c-c2-c2">%</span>
              </div>
            </div>
            <img src="@/assets/images/arrow1.png" class="arrow pos3" />
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">整改报告</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">45</span>
                <span class="box-c-c2-c-c2-c2">份</span>
              </div>
            </div>
          </div>
          <img
            src="@/assets/images/detail.png"
            class="detailArrow"
            @click="sdxrClick"
          />
        </div>
        <div class="box-c">
          <div class="box-c-c1">
            <img src="@/assets/images/city.png" class="icon1" />
            <span>学生健康服务</span>
            <img src="@/assets/images/aiBtn.png" class="icon2" />
          </div>
          <div class="box-c-c2">
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">儿童青少年哨点监测近视率</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">--</span>
                <span class="box-c-c2-c-c2-c2">%</span>
              </div>
            </div>
            <img src="@/assets/images/arrow1.png" class="arrow pos1" />
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">儿童青少年近视管控试点数</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">--</span>
                <span class="box-c-c2-c-c2-c2">个</span>
              </div>
            </div>
            <img src="@/assets/images/arrow1.png" class="arrow pos2" />
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">中小学近视人数同比下降</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">--</span>
                <!-- <span class="box-c-c2-c-c2-c2">万人</span> -->
              </div>
            </div>
            <img src="@/assets/images/arrow1.png" class="arrow pos3" />
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">儿童青少年近视预防指导文件数</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">--</span>
                <span class="box-c-c2-c-c2-c2">次</span>
              </div>
            </div>
          </div>
          <img src="@/assets/images/detail.png" class="detailArrow" />
        </div>
        <div class="box-c">
          <div class="box-c-c1">
            <img src="@/assets/images/city.png" class="icon1" />
            <span>中小学研学实践管理</span>
            <img src="@/assets/images/aiBtn.png" class="icon2" />
          </div>
          <div class="box-c-c2">
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">学校研学活动开展率</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">--</span>
                <span class="box-c-c2-c-c2-c2">%</span>
              </div>
            </div>
            <img src="@/assets/images/arrow1.png" class="arrow pos1" />
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">事件办结量</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">--</span>
                <span class="box-c-c2-c-c2-c2">个</span>
              </div>
            </div>
            <img src="@/assets/images/arrow1.png" class="arrow pos2" />
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">家长满意度</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">--</span>
                <!-- <span class="box-c-c2-c-c2-c2">万人</span> -->
              </div>
            </div>
            <img src="@/assets/images/arrow1.png" class="arrow pos3" />
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">被预警素质教育课程</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">--</span>
                <span class="box-c-c2-c-c2-c2">门</span>
              </div>
            </div>
          </div>
          <img src="@/assets/images/detail.png" class="detailArrow" />
        </div>
        <div class="box-c">
          <div class="box-c-c1">
            <img src="@/assets/images/city.png" class="icon1" />
            <span>体育教育教学智管</span>
            <img src="@/assets/images/aiBtn.png" class="icon2" />
          </div>
          <div class="box-c-c2">
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">学生体测优良率</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">--</span>
                <span class="box-c-c2-c-c2-c2">%</span>
              </div>
            </div>
            <img src="@/assets/images/arrow1.png" class="arrow pos1" />
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">特色课程开设节次</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">--</span>
                <span class="box-c-c2-c-c2-c2">次</span>
              </div>
            </div>
            <img src="@/assets/images/arrow1.png" class="arrow pos2" />
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">中招体考满意度</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">--</span>
                <!-- <span class="box-c-c2-c-c2-c2">万人</span> -->
              </div>
            </div>
            <img src="@/assets/images/arrow1.png" class="arrow pos3" />
            <div class="box-c-c2-c">
              <span class="box-c-c2-c-c1">全市学生平均运动时长同比上涨</span>
              <div class="box-c-c2-c-l"></div>
              <div class="box-c-c2-c-c2">
                <span class="box-c-c2-c-c2-c1">--</span>
                <span class="box-c-c2-c-c2-c2">%</span>
              </div>
            </div>
          </div>
          <img src="@/assets/images/detail.png" class="detailArrow" />
        </div>
      </div>
    </div>
  </Dialog>
</template>

<style lang="less" scoped>
.table-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .btn {
    width: 100%;
    height: 36px;
    margin-top: 12px;
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
  }
  .table-container_content {
    width: 100%;
    flex: 1;
    // border: 1px gold solid;
    padding: 0px 24px 0 42px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    overflow: auto;
  }
}
.box-c:nth-of-type(2n-1) {
  background: rgba(255, 255, 255, 0.1);
}
.box2_c1_ccc {
  width: 308px;
  height: 36px;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  .box2_c1_ccc_c {
    width: 70px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(20, 45, 104, 0.5);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid;
    border-image: linear-gradient(
        93deg,
        rgba(45, 128, 255, 0.2),
        rgba(37, 145, 207, 1),
        rgba(27, 77, 153, 0.4)
      )
      1 1;
    font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
    font-weight: normal;
    font-size: 14px;
    color: #c9e9f8;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    cursor: pointer;
    img {
      margin-right: 2px;
    }
  }
  .box2_c1_ccc_c:hover {
    color: #ffffff;
  }
}
.box-c {
  width: 100%;
  //   flex: 1;
  height: 155px;
  background: rgba(9, 54, 100, 0.5);
  padding: 8px 12px 0;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  gap: 6px;
  position: relative;
  .box-c-c1 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Alibaba PuHuiTi 2.0-85 Bold";
    font-size: 16px;
    color: #c9e9f8;
  }
  .box-c-c2 {
    display: flex;
    gap: 29px;
    position: relative;
    .box-c-c2-c {
      min-width: 160px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      .box-c-c2-c-c1 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-family: "Alibaba PuHuiTi 2.0-65 Medium";
        font-size: 12px;
        color: #c9e9f8;
        line-height: 12px;
      }
      .box-c-c2-c-l {
        width: 60px;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(
            90deg,
            rgba(201, 233, 248, 0.4),
            rgba(201, 233, 248, 0)
          )
          1 1;
      }
      .box-c-c2-c-c2 {
        // display: flex;
        // align-items: end;
        // gap: 2px;
        .box-c-c2-c-c2-c1 {
          font-family: "Helvetica-Bold";
          font-weight: bold;
          font-size: 20px;
          color: #ffffff;
          line-height: 20px;
        }
        .box-c-c2-c-c2-c2 {
          font-family: "Alibaba PuHuiTi 2.0-55 Regular";
          font-size: 10px;
          color: rgba(201, 233, 248, 0.8);
          margin-left: 2px;
        }
      }
    }
  }
}
.op {
  opacity: 0.6;
}
.detailArrow {
  width: 21px;
  height: 18px;
  position: absolute;
  right: 12px;
  top: 42%;
  cursor: pointer;
}
.arrow {
  width: 44px;
  height: 38px;
}
</style>
